<template>
  <view class="coupon-content">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF00">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
        <text class="tn-text-bold tn-text-xl tn-color-white">优惠券</text>
      </view>
    </tn-nav-bar>
    
    
    <view class="tn-padding-bottom-lg tn-margin-bottom-lg" :style="{paddingTop: vuex_custom_bar_height + 10 + 'px'}">
      
      <!-- 优惠券-->
      <view class="coupon tn-margin-top" v-for="(item, index) in 12" :key="index">
        <view class="coupon-left">
          <view class="tn-margin-sm" style="z-index: 1;position: relative;">
            <view class="tn-padding-left-xs tn-padding-top-xs tn-padding-bottom-sm tn-color-black tn-text-bold tn-text-lg">
              新店开业优惠券
            </view>
            <view class="tn-text-sm tn-color-gray--dark">
              · 满任意金额可使用
            </view>
            <view class="tn-text-sm tn-color-gray--dark">
              · 限 2024-06-12 至 2024-12-12 使用
            </view>
          </view>
        </view>
        <view class="coupon-line">
          
        </view>
        <view class="coupon-right">
          <view class="tn-color-white tn-flex tn-flex-col-center tn-flex-row-center" style="z-index: 1;position: relative;font-size: 50rpx;margin-top: 56rpx;">
            ￥20
          </view>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateContent',
    mixins: [template_page_mixin],
    data(){
      return {
        tuniaoData: [{
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'orange',
            index: 1,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '机器人很长很长的名字名字名字名字名字名字',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          },
          {
            title: '优惠券名称',
            color: 'blue',
            index: 0,
            url: '/homePages/xxxx'
          }
        ],
      }
    },
    methods: {
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
  }
  
  .coupon-content {
    margin: 0;
    width: 100%;
    min-height: 100vh;
    // height: 100vh;
    color: #fff;
    /* background: linear-gradient(-120deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4); */
    /* background: linear-gradient(-120deg,  #9A5CE5, #01BEFF, #00F5D4, #43e97b); */
    /* background: linear-gradient(-120deg,#c471f5, #ec008c, #ff4e50,#f9d423); */
    background: linear-gradient(-120deg, #0976ea, #c471f5, #f956b6, #ea7e0a);
    background-size: 300% 300%;
    animation: gradientBG 5s ease infinite;
    position: relative;
  }
  
  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
  
    50% {
      background-position: 100% 50%;
    }
  
    100% {
      background-position: 0% 50%;
    }
  }
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .coupon {
    width: 690rpx;
    height: 180rpx;
    overflow: hidden;
    display: flex;
    // justify-content: center;
    // align-items: center;
    margin-left: 30rpx;
    /* 裁剪式也生效的阴影*/
    filter: drop-shadow(0 0 10rpx rgba(0, 0, 0, 0.15));
    // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.62);
  }
  .coupon-left {
    width: 510rpx;
    height: 180rpx;
    position: relative;
    overflow: hidden;
    border-radius: 20rpx;
    /* background: #fff; */
  }
  .coupon-left::before, .coupon-left::after{
    content: '';
    position: absolute;
    right: -575rpx;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    border: 560rpx solid #FFFFFF;
  }  
  .coupon-left::before {
    top: -575rpx;
    clip: rect(575rpx,575rpx,685rpx,55rpx);
  }
  .coupon-left::after {
    top: -395rpx;
    clip: rect(465rpx,575rpx,575rpx,55rpx);
  }
  
  .coupon-right {
    width: 180rpx;
    height: 180rpx;
    position: relative;
    overflow: hidden;
    border-radius: 20rpx;
    /* background: #252525; */
  }
  .coupon-right::before, .coupon-right::after {
    content: '';
    position: absolute;
    right: -118rpx;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    border: 280rpx solid #FFB113;
  }
  .coupon-right::before {
    top: -295rpx;
    clip: rect(295rpx,485rpx,405rpx,295rpx);
  }
  .coupon-right::after {
    top: -115rpx;
    clip: rect(185rpx,485rpx,295rpx,295rpx);
  }
  .coupon-line {
    position: absolute;
    right: 180rpx;
    top: 16rpx;
    z-index: 9;
    // width: 60rpx;
    height: 148rpx;
    // border-radius: 50%;
    border-right: 6rpx dashed #FFFFFF;
  }
  .coupon-line::after {
    top: 0rpx;
    clip: rect(0,0,575rpx,575rpx);
  }
  
</style>
